<template>
  <ul>
    <li
      v-for="(item,index) in menuItem"
      :key="index"
      @click="skip(item)"
      style="cursor: pointer"
      class="backIcon"
    >
      <div>
        <svg-icon
          className="svgClass"
          :icon-class="item.icon"
        ></svg-icon>
      </div>
      <div>{{ item.name }}</div>
    </li>
  </ul>
</template>
<script>
import { oftenMenuFindAll } from '@/api/after-sale/dashboard';//查询常用按钮
export default {
  data () {
    return {
      menuItem: [
        // { title: '洗车单列表', iconIndex: '6', src: '/workOrderManage/car-wash' },
        // { title: '采购列表', iconIndex: '1', src: '/purchaseManage/purchaseRecords' },
        // { title: '出库列表', iconIndex: '2', src: '/storehouseManage/outOfStockManage' },
        // { title: '入库列表', iconIndex: '3', src: '/storehouseManage/inOfStockManage' },
        // { title: '财务管理', iconIndex: '4', src: '/financialflow/runningAccount' },
        // { title: '客户管理', iconIndex: '5', src: '/client-manage/client' },
        // { title: '车辆管理', iconIndex: '7', src: '/client-manage/car' }
      ]
    }
  },
  methods: {
    skip (item) {
      if (item.menuPath) {
        this.$router.push({ path: item.menuPath })
      } else {
        this.$message.warning(`${item.name}的路径不存在，请联系管理员`)
      }
    },
    getMenuList () {
      oftenMenuFindAll().then(res => {
        let { success, data } = res;
        if (success) {
          this.menuItem = data;
        }
      })
    }
  },
  created () {
    this.getMenuList();
  }

}
</script>
<style  rel="stylesheet/scss" lang="scss" scoped>
ul {
  // border: 1px solid red;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  li {
    height: 100px;
    width: 100px;
    border-radius: 10px;
    margin-right: 33px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #333333;
    border: 1px solid #dadada;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.svgClass {
  font-size: 40px;
  margin-bottom: 10px;
}
.backIcon {
  // color: white;
  //   background-color: rgb(11, 124, 192)
}
</style>
